<!--
 *    ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 *    🌟                                           🌟
 *         🎋 🎋 🎋 🎋 🎋 🎋 🎋 🎋 🎋 🎋 🎋 🎋
 *    🌟   ～～～～～～～～～～～～～～～～～～～～～   🌟
 *         🌸 佛祖保佑 🌸 永不宕机 🌸 永无BUG 🌸
 *         ～～～～～～～～～～～～～～～～～～～～～
 *         🎋 🎋 🎋 🎋 🎋 🎋 🎋 🎋 🎋 🎋 🎋 🎋
 *    🌟                                           🌟
 *    ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
 -->

<template>
  <div class="option-wrapper">
    <div class="option-main">
      <a-form layout="vertical" :model="formState" :rules="rules" ref="formRef">
        <div class="option-column">
          <div class="column-title">实验基础信息</div>
          <div class="column-content">
            <div class="content-item">
              <a-form-item label="名称" name="name">
                <a-input
                  v-model:value="formState.name"
                  placeholder="请输入名称"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="实验分类" name="class">
                <a-select
                  v-model:value="formState.class"
                  :options="categoryOptions"
                  placeholder="请选择实验分类"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="AI测评" name="ai">
                <a-radio-group v-model:value="formState.ai">
                  <a-radio value="1">支持</a-radio>
                  <a-radio value="2">不支持</a-radio>
                </a-radio-group>
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="数字孪生" name="twin">
                <a-radio-group v-model:value="formState.twin">
                  <a-radio value="1">支持</a-radio>
                  <a-radio value="2">不支持</a-radio>
                </a-radio-group>
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="实验类型" name="type">
                <a-select
                  v-model:value="formState.type"
                  :options="typeOptions"
                  placeholder="请选择实验类型"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="实验状态" name="status">
                <a-select
                  v-model:value="formState.status"
                  :options="statusOptions"
                  placeholder="请选择实验状态"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="付费性质" name="payType">
                <a-select
                  v-model:value="formState.payType"
                  :options="payTypeOptions"
                  placeholder="请选择付费性质"
                />
              </a-form-item>
            </div>
          </div>
        </div>
        <div class="option-column">
          <div class="column-title">封面图</div>
          <a-upload-dragger
            v-model:fileList="fileList2"
            name="file"
            :multiple="false"
            :max-count="1"
            :customRequest="customUpload2"
            @change="handleChange2"
            @drop="handleDrop2"
          >
            <p class="ant-upload-drag-icon">
              <CloudUploadOutlined />
            </p>
            <p class="ant-upload-hint">
              将jpg、bmp、png格式的图片拖拽到此，或单击<span class="blue"
                >直接上传</span
              >分辨建议为400*300
            </p>
          </a-upload-dragger>
        </div>
        <div class="option-column">
          <div class="column-title">关联实验器材</div>
          <template v-for="(item, index) in equipmentList" :key="index">
            <div class="column-content">
              <div class="content-item">
                <a-form-item label="器材名称">
                  <a-select
                    v-model:value="item.name"
                    :options="equipmentOptions"
                    placeholder="请选择器材名称"
                  />
                </a-form-item>
              </div>
              <div class="content-item">
                <a-form-item label="数量">
                  <a-input-number
                    v-model:value="item.quantity"
                    placeholder="请输入数量"
                    style="width: 100%"
                  />
                </a-form-item>
              </div>

              <div class="content-item">
                <a-button
                  type="primary"
                  danger
                  :icon="h(DeleteOutlined)"
                  @click="delEquipment(index)"
                  v-if="equipmentList.length > 1"
                  >删除器材</a-button
                >
              </div>
            </div>
          </template>
          <div class="column-footer">
            <a-button
              type="dashed"
              :icon="h(PlusOutlined)"
              @click="addEquipment"
              >添加器材</a-button
            >
          </div>
        </div>
        <div class="option-column">
          <div class="column-title">实验记录数据表</div>
          <template v-for="(item, index) in records">
            <div class="column-content">
              <div class="content-item">
                <a-form-item label="表格名称" name="name">
                  <a-input
                    v-model:value="item.name"
                    placeholder="请填写表格名称"
                  />
                </a-form-item>
              </div>
              <div class="content-item">
                <a-button
                  type="primary"
                  danger
                  :icon="h(DeleteOutlined)"
                  @click="delTable(index)"
                  v-if="records.length > 1"
                  >删除表格</a-button
                >
              </div>
            </div>
            <!-- 显示表格的列数据 -->
            <template
              v-for="(column, columnIndex) in item.columns"
              :key="columnIndex"
            >
              <div class="column-content">
                <div class="content-item">
                  <single-data-form v-model="item.columns[columnIndex]" />
                </div>
                <div class="content-item">
                  <a-button
                    type="primary"
                    danger
                    :icon="h(DeleteOutlined)"
                    @click="delColumn(index, columnIndex)"
                    v-if="item.columns.length > 1"
                    >删除列</a-button
                  >
                </div>
              </div>
            </template>
            <div class="column-footer">
              <a-button
                type="dashed"
                :icon="h(PlusOutlined)"
                @click="addColumn(index)"
                >添加列</a-button
              >
            </div>
          </template>

          <div class="column-footer">
            <a-button type="dashed" :icon="h(PlusOutlined)" @click="addTable"
              >添加表格</a-button
            >
            <!-- <a-button type="primary" @click="debugTableData" style="margin-left: 10px;">查看表格数据</a-button> -->
          </div>
        </div>
        <div class="option-column">
          <div class="column-title">附件</div>
          <a-upload-dragger
            v-model:fileList="fileList1"
            name="file"
            :multiple="false"
            :max-count="1"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            :customRequest="customUpload1"
            @change="handleChange1"
            @drop="handleDrop1"
          >
            <p class="ant-upload-drag-icon">
              <CloudUploadOutlined />
            </p>
            <p class="ant-upload-hint">
              将模型拖拽到此，或单击<span class="blue">直接上传</span>
            </p>
          </a-upload-dragger>
        </div>
        <div class="option-column">
          <div class="column-title">实验目的 <span class="red">*</span></div>
          <edit v-model:value="introduction" />
        </div>
        <div class="option-column">
          <div class="column-title">实验原理 <span class="red">*</span></div>
          <edit v-model:value="content" />
        </div>
        <div class="option-column">
          <div class="column-title">实验步骤 <span class="red">*</span></div>
          <edit v-model:value="steps" />
        </div>
        <div class="option-column">
          <div class="column-title">注意事项 <span class="red">*</span></div>
          <edit v-model:value="notice" />
        </div>
        <div class="option-footer">
          <a-button class="opt-btn" @click="resetForm">取消</a-button>
          <a-button class="opt-btn" type="primary" @click="handleSubmit"
            >保存</a-button
          >
        </div>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import api from "@/api";
import systemApi from "@/api/system";
import edit from "@/components/edit/index.vue";
import singleDataForm from "@/components/singleDataForm/index.vue";
import {
  CloudUploadOutlined,
  DeleteOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { h, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const formState = ref({
  name: "",
  class: null,
  ai: "",
  twin: "",
  type: null,
  status: null,
  payType: null,
});

// 下拉框选项数据
const categoryOptions = ref([]);
const typeOptions = ref([]);
const statusOptions = ref([]);
const payTypeOptions = ref([]);
const equipmentOptions = ref([]);
const resetForm = () => {
  formState.value = {
    name: "",
    class: null,
    ai: "",
    twin: "",
    type: null,
    status: null,
    payType: null,
  };
  introduction.value = "";
  content.value = "";
  steps.value = "";
  notice.value = "";
  fileList1.value = [];
  equipmentList.value = [
    {
      name: "",
      quantity: null,
      remark: "",
    },
  ];
  records.value = [
    {
      name: "",
      columns: [
        {
          name: "",
          sort: null,
          remark: "",
        },
      ],
    },
  ];
  // 清除表单验证状态
  if (formRef.value) {
    formRef.value.clearValidate();
  }
};

// 获取下拉框选项数据
const fetchOptions = () => {
  api
    .apiExperimentCategoryOptionsPost({})
    .then(({ data }) => (categoryOptions.value = data));
  api
    .apiExperimentTypeOptionsPost({})
    .then(({ data }) => (typeOptions.value = data));
  api
    .apiExperimentStatusOptionsPost({})
    .then(({ data }) => (statusOptions.value = data));
  api
    .apiExperimentPayTypeOptionsPost({})
    .then(({ data }) => (payTypeOptions.value = data));
  api
    .apiEquipmentOptionsPost({})
    .then(({ data }) => (equipmentOptions.value = data));
};

// 组件挂载时获取选项数据
onMounted(() => {
  fetchOptions();

  // 检查是否为编辑模式
  const id = route.query.id;
  if (id) {
    isEditMode.value = true;
    experimentId.value = id;
    fetchExperimentData(id);
  }
});

// 回显的问题  需要 experiment_column_id 调用 /api/ExperimentColumn/FetchModel接口拿到里面列的数据才能回显
// 目前问题找不到 experiment_column_id 在哪里

// 获取实验详情数据
const fetchExperimentData = async (id) => {
  try {
    const response = await api.apiExperimentFetchModelPost({
      experiment_id: id,
    });
    if (response.data) {
      const data = response.data;
      console.log(data, "data");
      // 映射基础表单数据
      formState.value = {
        name: data?.name,
        class: data.experiment_category_id,
        ai: data.ai_enabled ? "1" : "2",
        twin: data?.twin_abled ? "1" : "2",
        type: data?.experiment_type_name,
        status: data?.experiment_status_name,
        payType: data?.experiment_pay_type_name,
        jz: data?.jz,
        num1: data?.num1 || null,
        qc: data?.qc,
        num2: data?.num2 || null,
      };
      console.log(112, formState.value, data.experiment_category_id);
      fileList2.value = data.thumb_url
        ? [{ url: data.thumb_url, name: "封面图" }]
        : [];
      // 保存ID字段用于提交
      formState.value.type = data.experiment_type_id; //实验类型id
      formState.value.status = data.experiment_status_id; //实验状态id
      formState.value.payType = data.experiment_pay_type_id; //付费性质

      // 映射富文本编辑器内容
      introduction.value = data.objective || "";
      content.value = data.principle || "";
      steps.value = data.steps || "";
      notice.value = data.notice || "";

      if (data.tables && data.tables.length > 0) {
        records.value = data.tables.map((table) => ({
          experiment_id: table.experiment_id,
          experiment_table_id: table.experiment_table_id,
          name: table.name || "",
          columns: (table.columns || []).map((column) => ({
            name: column.name || "",
            sort: column.sort ?? null,
            remark: column.remark || "",
          })),
        }));
        // console.log('回显实验记录数据表:', records.value);
      } else {
        records.value = [];
      }

      // 映射关联实验器材（如果有的话）
      if (data.equipments && data.equipments.length > 0) {
        equipmentList.value = data.equipments.map((equipment) => ({
          experiment_id: equipment.experiment_id,
          name: equipment.equipment_id, // 器材ID存储在name字段中
          quantity: equipment.amount, // 数量
        }));
        // console.log('回显关联实验器材:', equipmentList.value);
      }

      // 映射附件（如果有的话）
      if (data.report_files && data.report_files.length > 0) {
        fileList1.value = data.report_files.map((file, index) => ({
          uid: file.fileId || `file-${index}`,
          name: file.file_name,
          size: file.file_size,
          type: file.file_content_type,
          status: "done",
          url: file.url || null,
          response: {
            succeeded: true,
            data: {
              file_id: file.fileId,
              file_name: file.file_name,
              file_size: file.file_size,
              file_content_type: file.file_content_type,
              url: file.url,
            },
          },
        }));
      }
    }
  } catch (error) {
    console.error("获取实验详情失败:", error);
    message.error("获取实验详情失败，请重试");
  }
};

// 表单引用
const formRef = ref();
// 路由实例
const router = useRouter();
const route = useRoute();

// 编辑模式相关
const isEditMode = ref(false);
const experimentId = ref(null);

// 处理表单提交
const handleSubmit = async () => {
  try {
    // 验证表单
    await formRef.value.validate();

    if (isEditMode.value) {
      // 编辑模式：使用原有逻辑
      await handleUpdateExperiment();
    } else {
      // 新增模式：使用新的创建流程
      await handleCreateExperiment();
    }
  } catch (error) {
    if (error.errorFields) {
      message.error("请完善必填信息");
    } else {
      const errorPrefix = isEditMode.value ? "更新实验失败" : "创建实验失败";
      message.error(errorPrefix + ": " + (error.message || "未知错误"));
      console.error(errorPrefix + ":", error);
    }
  }
};
// 调试函数：打印所有表格和列的数据
const debugTableData = () => {
  console.log("=== 实验记录数据表调试信息 ===");
  records.value.forEach((table, tableIndex) => {
    console.log(`表格 ${tableIndex + 1}:`, {
      表格名称: table.name,
      列数据: table.columns.map((column, columnIndex) => ({
        列索引: columnIndex + 1,
        名称: column.name,
        排序: column.sort,
        备注: column.remark,
      })),
    });
  });
  console.log("=== 调试信息结束 ===");
};
// 处理实验更新（编辑模式）
const handleUpdateExperiment = async () => {
  console.log(records.value, "实验记录数据表");

  console.log(equipmentList.value, "实验器材");

  // 准备器材数据
  const equipments =
    equipmentList.value && equipmentList.value.length > 0
      ? equipmentList.value.map((item) => ({
          experiment_id: item.experiment_id,
          equipment_id: item.name, // 器材名称字段实际存储的是器材ID
          amount: item.quantity,
        }))
      : [];
  console.log(equipments, "编辑后实验器材");

  // 准备表格数据
  const tables =
    records.value && records.value.length > 0
      ? records.value.map((record) => ({
          experiment_table_id: record.experiment_table_id,
          experiment_id: record.experiment_id,
          name: record.name || "未命名表格",
          experiment_column: (record.columns || []).map((column) => ({
            name: column.name || "未命名列",
            sort: column.sort ?? null,
            remark: column.remark || "",
          })),
        }))
      : [];
  console.log(tables, "编辑后实验记录数据表", fileList2.value);
  // 使用apiExperimentFetchModelPost接口提交数据
  const submitData = {
    experiment_id: experimentId.value, // 编辑模式需要传入实验ID
    experiment_category_id: formState.value.class, //实验分类id
    experiment_type_id: formState.value.type, //实验类型id
    experiment_status_id: formState.value.status, //实验状态id
    experiment_pay_type_id: formState.value.payType, //付费性质
    name: formState.value.name,
    thumb_url: fileList2.value[0].url, // 如果有封面图片，可以在这里设置
    ai_enabled: formState.value.ai === "1",
    virtual_enabled: true,
    twin_abled: formState.value.twin === "1",
    objective: introduction.value,
    principle: content.value,
    steps: steps.value,
    notice: notice.value,
    experiment_equipment: equipments,
    experiment_table: tables,
    enabled: true,
  };

  // console.log('编辑模式-UpdateExperiment提交数据:', submitData);
  const response = await api.apiExperimentUpdateExperimentPost(submitData);

  if (response.success || response.data) {
    message.success("实验更新成功！");
    setTimeout(() => {
      router.go(-1);
    }, 1500);
  } else {
    message.error("实验更新失败，请重试");
  }
};

// 处理实验创建（新增模式）
const handleCreateExperiment = async () => {
  console.log("新增模式：使用统一接口");

  // 准备器材数据
  const equipments =
    equipmentList.value && equipmentList.value.length > 0
      ? equipmentList.value.map((item) => ({
          equipment_id: item.name, // 器材名称字段实际存储的是器材ID
          amount: item.quantity,
        }))
      : [];

  // 准备表格数据
  const tables =
    records.value && records.value.length > 0
      ? records.value.map((record) => ({
          table_name: record.name || "未命名表格",
          columns:
            record.columns && record.columns.length > 0
              ? record.columns.map((column) => ({
                  column_name: column.name || "未命名列",
                  sort: column.sort || null,
                  remark: column.remark || "",
                }))
              : [],
        }))
      : [];

  // 使用统一接口创建实验
  const experimentData = {
    experiment_category_id: formState.value.class,
    experiment_type_id: formState.value.type,
    experiment_status_id: formState.value.status,
    experiment_pay_type_id: formState.value.payType,
    name: formState.value.name,
    thumb_url: fileList2.value[0].url, // 如果有封面图片，可以在这里设置
    ai_enabled: formState.value.ai === "1",
    virtual_enabled: true,
    twin_abled: formState.value.twin === "1",
    objective: introduction.value,
    principle: content.value,
    steps: steps.value,
    notice: notice.value,
    equipments: equipments,
    tables: tables,
    enabled: true,
  };

  console.log("新增模式-统一接口提交数据:", experimentData);
  try {
    const experimentResponse = await api.apiExperimentCreateExperimentPost(
      experimentData
    );
    console.log("统一接口创建实验响应:", experimentResponse);

    // 创建成功
    message.success("实验创建成功！");
    setTimeout(() => {
      router.go(-1);
    }, 1500);
  } catch (error) {
    console.error("创建实验失败:", error);
    message.error("创建实验失败: " + (error.message || "未知错误"));
    throw error;
  }
};
const configurationList = ref([
  {
    configurationName: "",
    configurationParameter: "",
  },
]);
const content = ref("");
const introduction = ref("");
const steps = ref("");
const notice = ref("");
const equipmentList = ref([
  {
    name: "",
    quantity: null,
    remark: "",
  },
]);
const records = ref([
  {
    name: "",
    columns: [
      {
        name: "",
        sort: null,
        remark: "",
      },
    ],
  },
]);

// 定义 columns 变量用于存储实验记录数据表的列数据
const columns = ref([]);
const addEquipment = () => {
  equipmentList.value.push({
    name: "",
    quantity: null,
    remark: "",
  });
};
const delEquipment = (index) => {
  equipmentList.value.splice(index, 1);
};
const addTable = () => {
  records.value.push({
    name: "",
    columns: [
      {
        name: "",
        sort: null,
        remark: "",
      },
    ],
  });
};
const delTable = (index) => {
  records.value.splice(index, 1);
};
const addColumn = (tableIndex) => {
  records.value[tableIndex].columns.push({
    name: "",
    sort: null,
    remark: "",
  });
};
const delColumn = (tableIndex, columnIndex) => {
  records.value[tableIndex].columns.splice(columnIndex, 1);
};

const deleteDevice = (index) => {
  configurationList.value.splice(index, 1);
};
const fileList1 = ref([]);
const customUpload1 = async (options) => {
  const { file, onSuccess, onError, onProgress } = options;

  try {
    onProgress({ percent: 50 });
    const response = await systemApi.FileUpload(file);
    console.log("模型文件上传响应:", response);

    // 适配实际的API响应格式
    if (response && response.url) {
      // 构造符合Ant Design Upload组件期望的响应格式
      const formattedResponse = {
        succeeded: true,
        data: {
          url: response.url.trim().replace(/`/g, ""), // 去除URL中的反引号和空格
          file_id: response.file_id,
          file_name: response.file_name,
          file_size: response.file_size,
          file_content_type: response.file_content_type,
        },
      };
      console.log("格式化后的响应:", formattedResponse);
      onSuccess(formattedResponse, file);
    } else {
      console.error("API响应格式错误:", response);
      onError(new Error("上传失败：响应格式错误"));
    }
  } catch (error) {
    console.error("模型文件上传失败:", error);
    onError(error);
  }
};
const handleChange1 = (info) => {
  const { fileList } = info;
  fileList1.value = fileList;

  const status = info.file.status;
  console.log("=== 模型文件上传状态详情 ===");
  console.log("文件状态:", status);
  console.log("文件名:", info.file.name);
  console.log("文件大小:", info.file.size);
  console.log("响应数据:", info.file.response);
  console.log("文件URL:", info.file.url);
  console.log("完整文件对象:", info.file);
  console.log("文件列表:", fileList);
  console.log("================================");

  if (status === "done") {
    // 处理上传成功的响应数据
    const response = info.file.response;
    console.log("处理上传成功响应:", response);

    if (response && response.succeeded && response.data) {
      // 更新文件信息，使用API返回的URL
      info.file.url = response.data.url;
      console.log("设置文件URL为:", response.data.url);
      message.success(`${info.file.name} 模型文件上传成功`);
    } else {
      console.error("响应格式错误:", response);
      message.error(`${info.file.name} 模型文件上传失败`);
    }
  } else if (status === "error") {
    console.error("上传错误:", info.file.error);
    message.error(`${info.file.name} 模型文件上传失败`);
  }
};
function handleDrop1(e) {
  console.log(e);
}

const fileList2 = ref([]);

// 自定义上传函数 - 预览图片
const customUpload2 = async (options) => {
  const { file, onSuccess, onError, onProgress } = options;

  try {
    onProgress({ percent: 50 });
    const response = await systemApi.FileUpload(file);
    console.log("预览图片上传响应:", response);

    // 适配实际的API响应格式
    if (response && response.url) {
      // 构造符合Ant Design Upload组件期望的响应格式
      const formattedResponse = {
        succeeded: true,
        data: {
          url: response.url.trim().replace(/`/g, ""), // 去除URL中的反引号和空格
          file_id: response.file_id,
          file_name: response.file_name,
          file_size: response.file_size,
          file_content_type: response.file_content_type,
        },
      };
      console.log("格式化后的响应:", formattedResponse);
      onSuccess(formattedResponse, file);
    } else {
      console.error("API响应格式错误:", response);
      onError(new Error("上传失败：响应格式错误"));
    }
  } catch (error) {
    console.error("预览图片上传失败:", error);
    onError(error);
  }
};

const handleChange2 = (info) => {
  const { fileList } = info;
  fileList2.value = fileList;

  const status = info.file.status;
  console.log("=== 预览图片上传状态详情 ===");
  console.log("文件状态:", status);
  console.log("文件名:", info.file.name);
  console.log("文件大小:", info.file.size);
  console.log("响应数据:", info.file.response);
  console.log("文件URL:", info.file.url);
  console.log("完整文件对象:", info.file);
  console.log("文件列表:", fileList);
  console.log("================================");

  if (status === "done") {
    // 处理上传成功的响应数据
    const response = info.file.response;
    console.log("处理上传成功响应:", response);

    if (response && response.succeeded && response.data) {
      // 更新文件信息，使用API返回的URL
      info.file.url = response.data.url;
      console.log("设置文件URL为:", response.data.url);
      message.success(`${info.file.name} 预览图片上传成功`);
    } else {
      console.error("响应格式错误:", response);
      message.error(`${info.file.name} 预览图片上传失败`);
    }
  } else if (status === "error") {
    console.error("上传错误:", info.file.error);
    message.error(`${info.file.name} 预览图片上传失败`);
  }
};

function handleDrop2(e) {
  console.log("预览图片拖拽:", e);
}

const rules = ref({
  name: [
    {
      required: true,
      message: "请输入实验名称",
      trigger: "blur",
    },
  ],
  class: [
    {
      required: true,
      message: "请选择实验分类",
      trigger: "change",
    },
  ],
  type: [
    {
      required: true,
      message: "请选择实验类型",
      trigger: "change",
    },
  ],
  status: [
    {
      required: true,
      message: "请选择实验状态",
      trigger: "change",
    },
  ],
  payType: [
    {
      required: true,
      message: "请选择付费性质",
      trigger: "change",
    },
  ],
});
const handleLatexUpdate = (latex) => {
  console.log(latex);
};
</script>

<style lang="less" scoped>
.column-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background-color: #fafafa;
}

.content-item {
  flex: 1;
}

.content-item:last-child {
  flex: 0 0 auto;
}

.column-footer {
  margin-bottom: 16px;
}

.column-footer .ant-btn {
  width: 100%;
}
</style>
